<template>
    <div class="check-list-form">
        <modal :loading="loading" :show.sync="innerShow" :height="100" :id=" modalId ? 'modalId' : 'check-list-form'">
            <template slot="header">
                <span>{{`为#${this.id}创建CheckList`}}</span>
            </template>
            <template slot="body">
                <form  rel="CheckForm" class="form-horizontal row item-form" style="position: relative;">
                    <div class="col-md-12">
                        <div>
                            <label class="control-label">
                                Templates
                            </label>
                            <MySelect
                                    v-if="innerShow"
                                    :id="this.id + 'templates'"
                                    v-model="templateID"
                                    :options="[]"
                                    :searchable="true"
                                    :ajax="ajaxConf"
                                    placeholder="非必填"
                            >
                            </MySelect>
                        </div>
                        <!--<div>-->
                            <!--<label class="control-label">-->
                                <!--Name-->
                                <!--<span class="text-danger">*</span>-->
                            <!--</label>-->
                            <!--<input class="form-control" type="text" v-model="name"  :disabled="hasTemplate"/>-->
                        <!--</div>-->
                        <!--<div style="display: flex; align-items: center;margin-top: 10px;">-->
                            <!--<label>-->
                                <!--Is_template-->
                            <!--</label>-->
                            <!--<div style="margin-left: 4px; margin-top: 4px;">-->
                                <!--<checkbox name="terms"  v-model="isTemplate" :disabled="hasTemplate"></checkbox>-->
                            <!--</div>-->

                        <!--</div>-->
                    </div>
                </form>
            </template>
            <template slot="footer">
                <button type="button" class="btn btn-success waves-effect" @click="add">Add</button>
            </template>
        </modal>
    </div>
</template>

<script>
    import ShowSync from '@/mixins/ShowSync'
    import Modal from '@/components/widgets/Modal'
    import MySelect from '@/components/widgets/MySelect'
    import config from '@/config'
    import {getCookie} from '@/utils'

    export default {
        name: "CheckListForm",
        mixins: [ShowSync],
        components: {Modal, MySelect},
        props: ['modalId', 'show', 'id', 'height', 'title', 'model', 'loading'],
        data() {
            return {
                templateID: '',
                name: '',
                isTemplate: false,
            }
        },
        computed: {
            hasTemplate() {
                this.name = ''
                return this.templateID ? true : false
            }
        },
        created() {
            this.ajaxConf = {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                },
                delay: 250,
                type: 'POST',
                dataType: 'json',
                xhrFields: {withCredentials: true},
                url: config.serverURI + config.api.model_opt + `CheckList/search`,
                data: (params) => {
                    let search_keys = {}
                    search_keys[`name__icontains`] =  params.term
                    search_keys['model_name'] =  this.model
                    search_keys['is_template'] =  true

                    let query = {
                        search_keys: search_keys,
                        page_size: 200,
                    }
                    // Query parameters will be ?search=[term]&type=public
                    return JSON.stringify(query);
                },
                beforeSend: (xhr) => {
                    xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'))
                },
                processResults: (data) => {
                    return {
                        results: data.list.map(item => {
                            return {
                                id: item['id'],
                                text: item['name']
                            }
                        })
                    }

                }
            }
        },
        methods: {
            matchCustom(params, data) {
                // If there are no search terms, return all of the data
                if ($.trim(params.term) === '') {
                    return data;
                }

                // Do not display the item if there is no 'text' property
                if (typeof data.text === 'undefined') {
                    return null;
                }

                // `params.term` should be the term that is used for searching
                // `data.text` is the text that is displayed for the data object
                if (data.text.indexOf(params.term) > -1) {
                    return $.extend({}, data, true);
                }

                // Return `null` if the term should not be displayed
                return null;
            },
            add() {
                if (!this.templateID) {
                    return $.toast({
                        heading: 'Wrong',
                        text: 'You must chose a template',
                        position: 'top-right',
                        loaderBg: '#ff6849',
                        icon: 'error'
                    });
                }

                let attr = {
                    "model_name": this.model,
                    "object_id": this.id,
                    "name": this.name,
                    "is_template": this.isTemplate,
                    "template_id": this.templateID
                }
                this.$emit('add', attr)
            },
        },
        watch: {
            show() {
                this.templateID = ''
                this.name = ''
                this.isTemplate = false
            }
        }
    }
</script>

<style scoped lang="stylus">
    .check-list-form
        .my-checkbox
            margin-top :10px !important;

</style>